<script lang="ts" setup>
// import { nextTick, onMounted, ref, watch } from "vue"
// import { useResponsiveLayoutStore } from "@/store/responsiveLayout"
// import { get } from "@/utils/api"
//
// const store = useResponsiveLayoutStore()
//
// const option = {
//   xAxis: {
//     type: "category",
//     data: [],
//     name: "日期"
//   },
//   yAxis: {
//     type: "value",
//     name: "收入",
//     splitLine: { show: false }
//   },
//   tooltip: {
//     trigger: "axis",
//     axisPointer: { type: "line" }
//   },
//   legend: { data: ["支付宝", "微信"] },
//   series: [
//     {
//       name: "支付宝",
//       data: [],
//       type: "line",
//       smooth: true
//     },
//     {
//       name: "微信",
//       data: [],
//       type: "line",
//       smooth: true
//     }
//   ]
// }
//
//
// const chart = ref<any>(null)
// const show = ref(false)
//
//
// onMounted(async () => {
//   window.addEventListener("resize", () => {
//     chart.value.resize()
//   })
//   watch(() => store.asideWidth, () => {
//     let count = 0
//     const timer = setInterval(() => {
//       if (count >= 1000) {
//         clearInterval(timer)
//         return
//       }
//       chart.value.resize()
//       count++
//     }, 1)
//     setTimeout(() => {
//       clearInterval(timer)
//     }, 1000)
//   })
//   await nextTick()
//   // 等待DOM挂载好之后，再执行下面的代码
//   show.value = true
//   // 解构获取的数据
//   const { wechatPay, aliPay, date } = await get("api/order/trend")
//   // 日期数据
//   option.xAxis.data = date
//   // 支付宝支付数据
//   option.series[0]["data"] = aliPay
//   // 微信支付数据
//   option.series[1]["data"] = wechatPay
//   // 渲染图表
//   chart.value.setOption(option)
// })
</script>

<template>
  <t-row class="container">
    <t-col :span="12">
      <t-card header-bordered title="收入趋势">
        <div class="charts_container">
          <!--          <e-charts v-if="show" ref="chart" class="chart"/>-->
        </div>
      </t-card>
    </t-col>
  </t-row>
</template>

<style lang="less" scoped>
.container {
  margin: 20px 0;

  .charts_container {
    width: 100%;
    height: 250px;

    .chart {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
